<!--
 * @Description: 
 * @Author: wanghongjian
 * @@github: https://github.com/whj0117
 * @Date: 2025-11-06 17:16:47
 * @LastEditors: wanghongjian
 * @LastEditTime: 2025-11-13 13:26:53
-->
<template>
  <div class="dashboard-container">
    <div class="title">用户购房/车的信息调整</div>
    <div class="tags-item">
      <div class="filter-wrap">
        <div class="filter-container">
          <el-input
            v-model.trim="query.realName"
            clearable
            placeholder="用户名称"
            @keyup.enter.native="search"
          />
          <el-date-picker
            v-model="filterDate"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="调整申请开始时间"
            end-placeholder="调整申请结束时间"
            @change="handleTime"
          />
          <el-date-picker
            v-model="filterDate"
            clearable
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="调整同意开始时间"
            end-placeholder="调整同意结束时间"
            @change="handleTime1"
          />
          <el-select v-model="query.columnNameCh" clearable placeholder="用户认证调整">
            <el-option label="车子" value="0" ></el-option>
            <el-option label="房子" value="1" ></el-option>
          </el-select>
          <el-button
            @click="search"
            type="primary"
            style="background-color: #ff47ab; border-color: #ff47ab"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="table-data">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            'background-color': '#E3E5E8',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
        <el-table-column prop="columnNameCh" label="用户认证调整">
            <template slot-scope="{row}">
              <el-tag style="background-color:#fff;border-color:#FF47AB;color:#FF47AB;">{{row.columnNameCh}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="realName" label="用户姓名"></el-table-column>
          <el-table-column prop="educational" label="学历">
            <template slot-scope="{row}">
              {{ getCommonData('education',row.educational) }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="{row}">
              {{ getCommonData('sex',row.sex) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间"></el-table-column>
          <el-table-column prop="loginName" label="验证管家"></el-table-column>
          <el-table-column prop="address" label="验证操作"></el-table-column>
          <el-table-column label="查看个人详情">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="color: #ff47ab">
                去查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <pagination
      v-show="total"
      :total="total"
      :page.sync="query.pageNumber"
      :limit.sync="query.pageSize"
      @pagination="getInfo"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import {verifyColumnHistory} from "@/api/user"
import { getFormData } from '@/utils'
import {mapGetters} from "vuex"
export default {
  name: "Datalist",
  components: { Pagination },
  data() {
    return {
      query: {
        pageNumber:1,
        pageSize:10
      },
      filterDate: [],
      tableData: [],
      total: 1,
    };
  },
  computed: {
    ...mapGetters(['commonData'])
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    handleTime(e) {
      if (e) {
        this.query.applyStartTime = e[0]
        this.query.applyEndTime = e[1]
      } else {
        this.query.applyStartTime = this.query.applyEndTime = ''
      }
    },
    handleTime1(e) {
      if (e) {
        this.query.examineStartTime = e[0]
        this.query.examineEndTime = e[1]
      } else {
        this.query.examineStartTime = this.query.examineEndTime = ''
      }
    },
    getCommonData(key,val){
      if(val != null) return this.commonData[key].find(type => type.key == val).val
      return ''
    },
    async getInfo() {
      const { records,totalRow } = await verifyColumnHistory(getFormData(this.query))
      this.tableData = records
      this.total = totalRow
    }
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  min-height: calc(100vh - 84px);
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #222222;
  }
  .tags-item {
    margin: 30px 0 20px;
    .tags-item-list {
      margin-bottom: 60px;
      &:last-child {
        margin-bottom: 0;
      }
      .list-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          height: 14px;
          line-height: 14px;
          padding-left: 16px;
          border-left: 4px solid #ff47ab;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 14px;
          color: #222222;
        }
        .line {
          flex: 1;
          margin: 0 20px;
          border-top: 1px dashed #999999;
        }

        .edit {
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          cursor: pointer;
        }
      }
      .list-content {
        margin-top: 30px;
        ::v-deep .tableColumnClassName {
          background-color: #f1f3f7;
        }
        &.information-authentication {
          display: flex;
          align-items: center;
          .info-item {
            margin-right: 46px;
            font-size: 14px;
            color: #777777;
            & > img {
              width: 50px;
              height: 50px;
              margin-bottom: 12px;
            }
          }
        }

        &.textarea-content {
          line-height: 20px;
          font-size: 14px;
          color: #444444;
        }

        &.interrogate-content {
          .interrogate-item {
            margin-bottom: 30px;
            font-weight: 400;
            font-size: 14px;
            color: #444444;
            line-height: 20px;
            &:last-child {
              margin-bottom: 0;
            }
            .interrogate-title {
              margin-bottom: 16px;
              font-size: 14px;
              color: #ff47ab;
            }
            .interrogate-text {
              padding-left: 20px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    .filter-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .filter-container {
        margin-bottom: 0;
      }
    }
  }
}
</style>